<template>
    <div>
        <ul class="workbench-nav">
            <li v-for="item in nav" :key="item.title">
                <router-link :to="item.url" :title="item.title">
                    <div class="nav-item"><i :class="item.icon"></i></div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import { Md5 } from 'ts-md5';
import { defineComponent, reactive } from 'vue'
import { useRoute } from 'vue-router';

export default defineComponent({
    setup () {
        let pathMd5 = Md5.hashStr(useRoute().path)
        let nav = reactive([
            {title:'首页',url:'/workbench',icon:'iconfont icon-home'},
            {title:'信息管理',url:'/infomng',icon:'el-icon-document'},
            {title:'栏目管理',url:'/columnmng',icon:'el-icon-folder-opened'},
            {title:'站群管理',url:'/stationmng',icon:'el-icon-files'},
            {title:'交互管理',url:'/interactivemng',icon:'el-icon-thumb'},
            {title:'统计报表',url:'/statistical',icon:'el-icon-data-line'},
            {title:'用户管理',url:'/usermng',icon:'el-icon-user'},
            {title:'接口管理',url:'/apimng',icon:'el-icon-connection'},
            {title:'日志管理',url:'/logmng',icon:'el-icon-tickets'},
            {title:'系统管理',url:'/systemmng',icon:'el-icon-set-up'},
        ])
        return {
            nav,
            pathMd5
        }
    }
})
</script>

<style scoped lang="scss">
.workbench-nav{
    width: 40px;
    height: calc(100vh - 45px);
    background: #fff;
    border-right: #f1f1f1 solid 1px;
    position: fixed;
    z-index: 999;
    li{
        .home-item{
            i{
                font-size: 16px;
                width: 100%;
                height: 50px;
                text-align: center;
                line-height: 50px;
                border-bottom: solid 1px #ECEDF1;
                color: #252C3B;
            }
        }
        .nav-item{
            i{
                font-size: 16px;
                width: 100%;
                height: 36px;
                text-align: center;
                line-height: 36px;
                color: #2b313f;
            }
            .icon-home{
                font-size: 16px;
                display: inline-block;
            }
        }

        .nav-item:hover i{
            color: var(--el-color-primary);
        }

        .router-link-active .nav-item{
            background: #ecf5ff;
        }

        .router-link-active .nav-item:hover i{
            color: #2b313f;
        }
        
    }
    li:hover{
        .sub-left-nav{
            display: block;
        }
    }
}
</style>